<template>
  <view class="ass-comment-tab">
    <view class="ss-flex">
      <view
        class="c-navBar-search ss-flex ss-row-between ss-flex-1"
        @click="ontabstap"
      >
        <view class="search-icon _aicon-bianji ss-m-l-15"></view>
        <!-- <input disabled class=" ss-flex-1" placeholder-style="color:#A8A8A8;font-size:26rpx" type="text" placeholder="我也评论下"/> -->
        <view
          class="ss-flex-1"
          style="color: #a8a8a8; font-size: 26rpx"
        >我也评论下</view>
      </view>
      <view
        class="iconBox ss-flex"
        v-if="props.btnShow"
      >
        <view
          class="ss-flex"
          @click.stop="like"
        >
          <view
            class="likeicon icon"
            :style="{ color: theme.likes_color }"
            :class="props.articleData.is_likes ? '_aicon-hear-full' : '_aicon-hear'"
          ></view>
          {{ formatCharCount(props.articleData.likes) }}
        </view>
        <view class="ss-flex">
          <view class="icon _aicon-xiaoxi"></view>{{ formatCharCount(props.articleData.comment_num) }}
        </view>
        <view
          v-if="!props.share"
          class="ss-flex"
        >
          <uni-icons
            type="star"
            size="28"
          ></uni-icons>
        </view>
        <button
          v-else
          class="ss-flex ss-reset-button"
          @click="collection(props.articleData)"
        >
          <uni-icons
            :type="props.articleData.is_collection ? 'star-filled' : 'star'"
            size="28"
            :color="props.articleData.is_collection ? '#E86357' : ''"
          ></uni-icons>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits(['comment', 'likeSet']);
import { computed, reactive } from 'vue';
import { formatCharCount } from '@/association/utils'
import sheep from '@/sheep';
import association from '@/association/store'
import assApi from '@/association/api'
import {
  onShow,
  onLoad,
} from '@dcloudio/uni-app';
const props = defineProps({
  articleData: {
    type: Object,
    default: () => ({
      // 转发量
      forward: 0,
      // 收藏量
      likes: 0,
      // 参与人数
      number: 0,
      // 是否已点赞
      is_likes: false,
      // 是否已收藏
      is_collection: false
    }),
  },
  share: {
    type: Boolean,
    default: true,
  },
  btnShow: {
    type: Boolean,
    default: true,
  },
  fixed: {
    type: Boolean,
    default: true,
  },
});
// onShareTimeline(()=>{
// 	return{
// 		title:'分享标题',
// 		path:'/association/pages/talk',
// 		imageUrl:'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/uploads/20231027/037a56404a9e66dc2eb45dc636a40caf.png',
// 		desc:'理疗的原理是什么'
// 	}
// })
const like = async () => {
  if (!props.articleData.id) return;
  emit('likeSet');
};
const theme = computed(() => association().theme)
const collection = async () => {
  if (!props.articleData.id) return;
  emit('collection');
}
const ontabstap = () => {
  emit('comment');
};
// onPageScroll(() => { });
</script>

<style lang="scss" scoped>
@import '@/association/scss/index.scss';

view {
  box-sizing: border-box;
}

.ass-comment-tab {
  height: calc(env(safe-area-inset-bottom) + 50px);

  & > view {
    padding: 15rpx 25rpx calc(env(safe-area-inset-bottom) + 15rpx);
    position: fixed;
    bottom: -1rpx;
    z-index: 30;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-bottom) + 50px);
    background-color: #fff;
  }
}

.likeicon {
  color: #47dfbd;
}

.iconBox {
  font-size: 26rpx;

  & > view > view {
    margin: 0 10rpx;
  }

  & > button > view {
    margin: 0 10rpx;
  }

  button {
  }

  .icon {
    font-size: 40rpx;
  }
}

.c-navBar-search {
  margin-right: 10rpx;
  background-color: #f6f5f6;
  height: 30px;
  border-radius: 15px;

  .search-icon {
    width: 50rpx;
    font-size: 35rpx;
    color: #a8a8a8 !important;
  }

  input {
    flex: 1;
    color: #333 !important;
  }

  .search-btn {
    line-height: 100%;
    transform: translateX(1px);
    border-radius: 15px;
    height: 100%;
    width: 108rpx;
    min-width: 108rpx;
    background-color: #47dfbd;
    color: #fff;
    font-size: 16px;
    box-sizing: border-box;
  }
}
</style>
